// pages/video/video.js
import request from '../../utils/request'
Page({
  toSearch () { 
    wx.navigateTo({
      url:'/pages/search/search'
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    navList: [], // 视频标签(导航菜单)列表数据
    navId: '', // 选中菜单的id
    videoList: [], // 视频列表数据
    videoId: '', // 存储的是正在播放的视频的id标识
    videoUpdateTime: [], // 存储的是对象,对象中包含 播放过的视频的id标识和实时播放时间
    isTriggered:false // 下拉的状态
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用方法,获取导航菜单数据
    this.getNavListData()
  },
  // 获取导航菜单数据
  async getNavListData () {
    const result = await request('/video/group/list')
    const navList = result.data.slice(0, 14)
    const navId = navList[0].id
    // 更新数据
    this.setData({
      navList,
      navId
    })
    // 根据视频的菜单id获取视频列表数据
    this.getVideoListData(this.data.navId)
  },
  // 改变选中的菜单的高亮显示效果
  changeNavId (event) {
    const navId = event.currentTarget.id
    // const navId = event.currentTarget.dataset.id
    // id和data-xxx的区别,id的方式内部存储的数据变成了字符串类型的值
    // data-xxx这种方式里面存储的数据是什么类型,取出来的就是什么类型---
    // 更新数据
    this.setData({
      // navId:navId*1
      // navId
      navId: navId >>> 0, // c语言中的位运算的方式
      videoList: [] // 清掉之前的视频列表数据
    })
    // 菜单切换的过程中,再次获取视频列表数据
    this.getVideoListData(this.data.navId)
  },
  // 获取视频列表
  async getVideoListData (id) {
    // 加载的效果
    wx.showLoading({
      title: '正在加载中'
    })
    const videoListData = await request('/video/group', { id })
    // 关闭加载的效果
    wx.hideLoading()
    // 修改下拉的状态
    this.setData({
      isTriggered:false
    })
    let index = 0
    const videoList = videoListData.datas.map(item => {
      item.id = index++
      return item
    })
    // 保存视频列表数据
    this.setData({
      videoList
    })

  },
  // 控制视频的播放
  handlerPlay (event) {
    // video组件标签显示视频(自带的控件可以播放或者暂停),但是想要手动控制播放或者暂停,需要自己创建对应的对象videoContext
    // 获取当前点击的这个视频的id(vid)
    // let vid = event.currentTarget.id
    // // 两次播放的视频不是同一个,那么就停止之前播放的视频
    // this.vid !== vid && this.videoContext && this.videoContext.stop()
    // // 存储vid
    // this.vid = vid
    // // 创建可以控制播放或者暂停的对象
    // this.videoContext = wx.createVideoContext(vid)
    // // 播放
    // this.videoContext.play()
    // 获取正在播放的视频的id标识
    let vid = event.currentTarget.id
    // 存储正在播放的视频的vid
    this.setData({
      videoId: vid
    })
    // 创建视频播放的对象
    this.videoContext = wx.createVideoContext(vid)
    let { videoUpdateTime } = this.data
    const videoItem = videoUpdateTime.find(item=>item.vid === vid)
    if (videoItem) { 
      // 直接跳到上次播放的时间位置
      this.videoContext.seek(videoItem.currentTime)
    }
    // 播放
    this.videoContext.play()
  },

  // 播放时间发生变化的事件的回调函数
  handlerUpdateTime (event) {
    const { videoUpdateTime } = this.data
    // 获取当前正在播放的视频的id和实时播放时间,产生一个对象,存储起来
    const updateTime = {
      vid: event.currentTarget.id, // 播放视频的id
      currentTime: event.detail.currentTime // 实时播放时间
    }
    // 判断当前的数组中是否存储过这个对象,如果存储过,那么直接更新实时时间
    let updateTimeItem = videoUpdateTime.find(item => item.vid === updateTime.vid)
    if (updateTimeItem) {
      updateTimeItem.currentTime=event.detail.currentTime
    } else { 
      videoUpdateTime.push(updateTime)
    }
    // 更新数组数据
    this.setData({
      videoUpdateTime
    })

  },
  // 视频播放结束
  handlerEnd (event) { 
    let vid = event.currentTarget.id
    const { videoUpdateTime } = this.data
    // 从数组中移除找到的数据
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === vid), 1) 
    // 更新数据
    this.setData({
      videoUpdateTime
    })
  },

  // 下拉刷新
  handlerRefresh () { 
    this.getVideoListData(this.data.navId)
  },
  // 上拉加载
  handlerTolower () { 
    const { videoList } = this.data
    const newVideoList = [...videoList.slice(0,8)]
    if (newVideoList.length) { 
      videoList.push(...newVideoList)
    }
    // 更新数据
    this.setData({
      videoList
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('页面的下拉事件')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('页面上拉触底事件')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({ from}) {
    if (from === 'button') {
      return {
        title: '来自button的转发',
        path: '/pages/video/video',
        imageUrl:'/static/images/lyml.jpg'
      }
    } else { 
      return {
        title: '来自menu的转发',
        path: '/pages/video/video',
        imageUrl:'/static/images/lyml.jpg'
      }
    }
  }
})